<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>7-声明式渲染:求数组中每一项的倍数!</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="demo">
        {{message}}
    </div>

    <script>
        // 需求:求数组中每一项的倍数
        var vdata = {
            message: "声明式渲染:求数组中每一项的倍数!console里查看"
        }
        new Vue({
            el: "#demo",
            data: vdata
        });

        // 默认的数组
        var arr = [1, 2, 3, 4, 5];

        // 命令式-渲染(关注在哪里,做什么,怎么实现)
        /* 
        	var newArr = [];
        	for(var i=0;i<arr.length;i++){
        		newArr.push(arr[i]*2);
        	}
        */

        // 声明式-渲染(只关注在哪里,做什么,不用关注怎么实现)
        var newArr = arr.map(function(item) {
            return item * 2;
        })

        // ES6方法
        // var newArr = arr.map((item) => {
        //     return item * 2;
        // })
        console.log(newArr);
    </script>
</body>

</html>